/**
 * Styles for range-picker
 * Created by kevinlopez on 8/7/14.
 */

$maxWidth: 615px !default

.rg-range-picker
  max-width: $maxWidth

  &.rg-range-picker-vertical

    .rg-range-picker-calendars

      .rg-range-picker-calendar-box
        width: 100%
        border-right: none

  .rg-range-picker-box
    width: 100%
    padding: 0
    background-color: $well-bg

    &.only-calendars

      .rg-range-picker-calendars
        border-bottom-width: 0

    //&.only-slider

  .rg-range-picker-calendars
    border-bottom: solid 1px darken($well-bg, 7%)

    +clearfix()

    .rg-range-picker-calendar-box
      border-right: solid 1px darken($well-bg, 7%)
      float: left

      text-align: center
      width: 50%

      &.right,
      &:last-child
        border-right-width: 0



    .rg-range-picker-calendar-label
      margin-bottom: $font-size-base
      margin-top: $font-size-base
      color: darken($well-bg, 40%)
      font-weight: 200

// calendars style
.clean-calendar

  > table
    width: 100%

    thead

      tr

        &:first-child
          background-color: lighten($brand-primary, 45%)

          th

            button

              strong
                font-weight: normal
                text-transform: uppercase
                color: $gray-darker

          + tr

            th
              padding-top: $line-height-computed / 2
              padding-bottom: $line-height-computed / 2

              small
                font-weight: normal
                color: $brand-primary

        th

          .btn
            background-color: transparent !important

    tbody

      tr

        td

          .btn
            background-color: $well-bg
            padding: $padding-small-vertical + 3 $padding-small-horizontal - 4

            +transition-property(background)
            +transition-duration(350ms)

            .text-info
              font-weight: bold

            &.active
              background-color: $brand-primary

              .text-info
                color: #fff

  .btn
    border-width: 0

    &,
    &:hover,
    &:focus,
    &:active
      //background-color: transparent
      outline: none !important

      +box-shadow(none)




.rg-range-picker-slider
  padding: 15px 20px
  position: relative
  min-height: 30px

  .rg-range-picker-slider-labels
    margin-bottom: $line-height-computed

    .row
      position: relative


    .rg-range-picker-divider
      position: absolute
      left: 25%
      right: 25%
      top: $font-size-base * .75
      border-top: solid 1px darken($well-bg, 7%)
      text-align: center

      .label
        position: relative
        top: $font-size-base * -0.75
        border: solid 1px darken($well-bg, 7%)
        background-color: $well-bg
        color: $brand-success
        font-weight: 300
        font-size: $font-size-base - 2
        font-style: italic
        padding: ($font-size-base - 8) ($font-size-base - 6) ($font-size-base - 8) ($font-size-base - 4)
        border-radius: 50%





.label.label-range-picker
  border: solid 1px darken($well-bg, 7%)
  background-color: $well-bg
  color: darken($well-bg, 60%)
  font-weight: 300
  border-radius: $font-size-base
  font-size: $font-size-base - 2


.clean-slider
  position: relative
  height: $line-height-computed
  margin-bottom: $line-height-computed
  width: 100%

  .bar
    +box-shadow(inset 0 1px 2px rgba(0,0,0,.1))


    &.full
      height: $line-height-computed
      background-color: $gray-lighter
      border-radius: $line-height-computed / 2



    &.selection
      background-color: darken($brand-warning, 5%)
      height: 100%
      //border-radius: $line-height-computed / 2



  .bubble

    text-indent: -999px
    overflow: hidden


  .input

    &.low,
    &.high
      cursor: ew-resize


    &.selection
      cursor: all-scroll



  .pointer

    &.low
      cursor: ew-resize


    &.high
      cursor: ew-resize


    &.low,
    &.high
      background-color: $well-bg
      width: $line-height-computed
      height: $line-height-computed
      text-indent: -999px
      overflow: hidden
      border-radius: 50%
      position: relative

      &:after
        content: ' '
        background-color: $brand-warning
        width: $line-height-computed - 8
        height: $line-height-computed - 8
        position: absolute
        display: block
        top: 50%
        left: 50%
        margin-top: ($line-height-computed / -4) - 1
        margin-left: ($line-height-computed / -4) - 1
        border-radius: 50%



